<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户登录</title>
    <header th:replace="header::html"></header>
    <link rel="stylesheet"  th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <script  th:src="@{/js/login.js}"></script>


</head>
<body>
<header>
    <nav class="b_clear">
        <div class="nav_logo l_float">
            <img src="/imgs/logo.svg" alt="">
        </div>
        <div class="nav_link r_float">
            <ul>
                <li><a href="#">返回首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>

            </ul>
        </div>
    </nav>
</header>
<div class="container">
    <div class="login_body l_clear">
        <div class="login_form l_float">
            <div class="login_top">
                <img src="/imgs/logo_z.svg" alt="" class="">

                <div class="login_tags b_clear">
                    <span class="top_tag l_float active" onClick="PwdLogin()">密码登录</span>
                    <span class="top_tag r_float" onClick="QrcodeLogin()">扫码登录</span>
                </div>
            </div>
            <div class="login_con">
                <form id="login-form">

                    <div>
                        <label for="username">用户名</label>
                        <input type="text" name="username" id="username" placeholder="请输入您的账号" value="JX88888">
                        <img src="/imgs/icons/user.svg">
                        <p class="tips hidden">请检查您的账号</p>
                    </div>
                    <div>
                        <label for="password">密码</label>
                        <input type="password" name="password" id="password" placeholder="请输入您的密码" value="123456">
                        <img src="/imgs/icons/lock.svg">
                        <p class="tips hidden">请检查您的密码</p>
                    </div>


                    <div id="mpanel1"></div>


                    <div class="">
                        <button type="submit" lay-filter="login" lay-submit id="hid">登&nbsp;&nbsp;录</button>
                        <a href="#" class="layui-elip" onclick="xadmin.open('注册','/user/add')" permission="sys:user:add"
                           style="color: #0000FF">注册</a>
                        <a href="#" class="r_float" style="color: #0000FF">忘记密码？</a>
                        <p class="tips hidden">登录失败，请检查您的账户与密码</p>
                    </div>


                </form>

            </div>
            <div class="login_con hidden">
                <div class="qr_code">
                    <img src="/imgs/qr.png" alt="">
                    <p>请使用微信扫码登录<br>仅支持已绑定微信的账户进行快速登录</p>
                </div>

            </div>
            <div class="login_otherAccount">
                <span>第三方登录</span>
                <!--                        <a href="http://"><img src="/imgs/icons/wechat.svg" alt="微信登录"></a>-->
                <a href="http://"><img src="/imgs/icons/weibo.svg" alt="微博登录"></a>
                <a href=""><img src="/imgs/icons/qq.svg" alt="QQ登录"></a>
            </div>

        </div>
        <div class="login_ad l_float" id="AdImg">
            <a href="">查看详情</a>
        </div>
    </div>
    <div class="footer">
        <p>ptcTesty © 2020-2030 <a href="#">暴躁小天</a></p>
        <a href="#" target="_blank"><img src="/imgs/icons/icp_record_filing.svg" alt="工信部备案">天字第1320120号</a>
    </div>
</div>


<script type="text/javascript" src="/js/verify.js"></script>

</body>


<script>

	var flag = false;
	layui.use('form', function () {
		var form = layui.form
			, layer = layui.layer;
		$('#hid').on("click", function () {

			if (flag === true) {
				//监听提交
				form.on('submit(login)', function (data) {
					$.ajax({
						type: 'post',
						url: '/api-front/login',
						data: $("#login-form").serialize(),
						success: function (datas) {
							if (datas.authenticated == true) {
								localStorage.setItem("userId", datas.principal.uid);
								localStorage.setItem("uname", datas.principal.uname);
								localStorage.setItem("nickName", datas.principal.rid);
								var authorities = datas.authorities;
								var permission = [];
								for (var i in authorities) {
									permission.push(authorities[i].authority);
								}
								localStorage.setItem("permission", JSON.stringify(permission));
								layer.msg("登录成功", {time: 500}, function () {
									location.href = '/api-front/getPage?pageName=index'
								});
							} else {
								layer.alert("登录异常，请联系管理员",{icon:5});
								// location.href = '/api-front/getPage?pageName=frontPage/user-login'
							}
						},
						error: function (xhr, textStatus, errorThrown) {
							var msg = xhr.responseText;
							var response = JSON.parse(msg);
							layer.alert(response.message,{icon:5});
							// location.href = '/api-front/getPage?pageName=frontPage/user-login'
						}
					});
					return false;
				});

			} else {
				alert("请先滑动验证码");
			}


		});


		//判断验证码
		$('#mpanel1').slideVerify({
			type: 1,		//类型
			vOffset: 5,	//误差量，根据需求自行调整
			barSize: {
				width: '80%',
				height: '40px'
			},

			ready: function () {
			},

			success: function () {
				layer.msg('验证成功');
				flag = true;

			},
			error: function () {
				layer.msg('验证失败');
			}

		});


	});


</script>


</html>

